<template>
  <div>
      <!-- 视频模板 -->
         <div class="videoPost" v-if="item.type == 2">
            <div class="title" @click="toDetail">{{item.title}}</div>
            <div class="cover" @click="toDetail">
                <img :src="item.cover[0].url" alt="" class="coverImg">
                <div class="btnWrapper">
                    <div class="iconfont iconshipin"></div>
                </div>
            </div>
            <div class="info">{{item.user.nickname}} {{item.comment_length}}跟帖</div>
        </div>
       <!-- 第一种模板,封面图片小于三张的情况 -->
       <div class="singleImgPost" v-else-if="item.cover.length>0 && item.cover.length < 3">
            <div class="left">
                <div class="title" @click="toDetail">{{item.title}}</div>
                <div class="info">{{item.user.nickname}} {{item.comment_length}}跟帖</div>
            </div>
            <img :src="$fixImgUrl(item.cover[0].url)" alt="" class="imgRight" @click="toDetail">
        </div>
        <!-- 第二种模板,封面图片大于等于三张的情况 -->
        <div class="multipImgPost" v-else-if="item.cover.length >= 3">
            <div class="title" @click="toDetail">{{item.title}}</div>
            <div class="covers" @click="toDetail">
                <img :src="$fixImgUrl(item.cover[0].url)" alt="" class="coverImg">
                <img :src="$fixImgUrl(item.cover[1].url)" alt="" class="coverImg">
                <img :src="$fixImgUrl(item.cover[2].url)" alt="" class="coverImg">
            </div>
            <div class="info">{{item.user.nickname}} {{item.comment_length}}跟帖</div>
        </div>
  </div>
</template>

<script>
export default {
    props: ['item'],
    methods:{
        // 点击跳转文章详情页函数
        toDetail(){
            // 设置跳往文章详情页链接
            this.$router.push({
                path: '/postdetail/' + this.item.id,
                // 我想带上一个动态路由参数叫做id
                // params:{
                //     id: this.item.id
                // }
                // 另一种做法
                //  name: 'postDetailPage',
                // 我想带上一个动态路由参数叫做id
                // this.$route.params
                // params: {
                //     id: this.post.id
                // }
            })
            // console.log(this.item.id);
        }
    }

}
</script>

<style lang="less" scoped>
// 第一种模板,封面图片小于三张的情况的样式
.singleImgPost {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.778vw;
  border-bottom: 1px solid #eee;

  .left {
    flex: 1;
    height: 20.833vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 2.778vw;
    .title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .info {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      font-size: 3.889vw;
      color: #888;
    }
  }

  .imgRight {
    width: 33.611vw;
    height: 20.833vw;
    object-fit: cover;
  }
}

// 第二种模板,封面图片大于等于三张的情况
 .multipImgPost {
        padding: 2.778vw;
        border-bottom: 1px solid #eee;
        .title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .covers {
            display: flex;
            justify-content: space-between;
            margin: 2.778vw 0;
            .coverImg {
                width: 33%;
                height: 20.556vw;
                object-fit: cover;
            }
        }
        .info {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            font-size: 3.889vw;
            color: #888;
        }
    }
    // 视频模板样式
    .videoPost{
        padding: 2.778vw;
        border-bottom: 1px solid #eee;
        .title{
             display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .cover{
            margin: 2.778vw 0;
            position: relative;
            .coverImg{
                width: 100%;
                height: 47.222vw;
                object-fit: cover;
            }
            .btnWrapper{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                .iconfont{
                    height: 15.278vw;
                    width: 15.278vw;
                    border-radius: 50%;
                   background: rgba(0,0,0,0.1);
                    font-size: 12.778vw;
                    color: white;
                    text-align: center;
                    line-height: 15.278vw;
                }
            }
        }
         .info {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            font-size: 3.889vw;
            color: #888;
        }
    }
</style>